<style include="settings-shared">
  #timezoneSelectorContainer {
    padding-block-end: var(--cr-section-vertical-padding);
    padding-inline-start: var(--cr-section-indent-padding);
  }
</style>
<settings-animated-pages id="pages" section="dateTime"
    focus-config="[[focusConfig_]]">
  <div id="main" route-path="default">
    <template is="dom-if"
        if="[[!prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
        restamp>
      <settings-toggle-button id="timeZoneAutoDetect"
          label="$i18n{timeZoneGeolocation}"
          pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}"
          deep-link-focus-id$="[[Setting.kChangeTimeZone]]">
      </settings-toggle-button>
      <div class="hr"></div>
    </template>
    <template is="dom-if"
        if="[[prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
        restamp>
      <cr-link-row id="timeZoneSettingsTrigger"
          on-click="onTimeZoneSettings_" label="$i18n{timeZoneButton}"
          sub-label="[[timeZoneSettingSubLabel_]]"
          role-description="$i18n{subpageArrowRoleDescription}">
        <div class="flex"></div>
        <cr-policy-pref-indicator
            pref="[[prefs.generated.resolve_timezone_by_geolocation_on_off]]">
        </cr-policy-pref-indicator>
      </cr-link-row>
    </template>
    <div id="timezoneSelectorContainer"
        hidden="[[prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]">
      <timezone-selector prefs="{{prefs}}"
          active-time-zone-display-name="{{activeTimeZoneDisplayName}}">
      </timezone-selector>
    </div>
    <settings-toggle-button
        class="hr"
        pref="{{prefs.settings.clock.use_24hour_clock}}"
        label="$i18n{use24HourClock}"
        deep-link-focus-id$="[[Setting.k24HourClock]]">
    </settings-toggle-button>
    <cr-link-row class="hr" id="setDateTime"
        on-click="onSetDateTimeTap_" hidden$="[[!canSetDateTime_]]"
        label="$i18n{setDateTime}">
      <template is="dom-if" if="[[displayManagedByParentIcon_]]">
        <cr-policy-indicator indicator-type="parent"></cr-policy-indicator>
      </template>
    </cr-link-row>
  </div>
  <template is="dom-if" route-path="/dateTime/timeZone">
    <settings-subpage data-route="DATETIME_TIMEZONE_SUBPAGE"
        page-title="$i18n{timeZoneSubpageTitle}"
        learn-more-url="$i18n{timeZoneSettingsLearnMoreURL}">
      <timezone-subpage id="timezoneSubpage" prefs="{{prefs}}"
          active-time-zone-display-name="{{activeTimeZoneDisplayName}}">
      </timezone-subpage>
    </settings-subpage>
  </template>
</settings-animated-pages>
